<template>
    <div>
        <el-table :data="data" border class="table" ref="multipleTable" @selection-change="handleSelectionChange">
            <el-table-column v-if="selection" type="selection" width="55" align="center"></el-table-column>
            <el-table-column v-for="(item,i) in tableArr" :key="i" :prop="item.prop" :label="item.label" :width="item.width ||''" :align="item.align || 'left'">
                <template slot-scope="scope">
                    <img v-if="item.type == 'img'"  :src="scope.row[item.prop]" alt="" style="width: 60px;height: 60px"></img>
                    <div v-if="item.type == 'text' || !item.type">{{scope.row[item.prop]}}</div>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="180" align="left" v-if="btnArr[0]">
                <template slot-scope="scope">
                    <el-button :style="{marginLeft: item.left || 10+'px'}" :type="item.type || 'text'" :icon="item.icon || 'el-icon-edit'" v-for="(item,i) in btnArr" @click="handleEdit(scope,item.key)" :key="i">{{item.label}}</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination background @current-change="handleCurrentChange" layout="prev, pager, next" :total="total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        tableArr: {
            type: Array,
            default: () => {
                return [];
            }
        },
        data: {
            type: Array,
            default: () => {
                return [];
            }
        },
        selection: {
            type: Boolean,
            default: false,
        },
        btnArr: {
            type: Array,
            default: () => {
                return [];
            }
        },
        total: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {

        };
    },
    methods: {
        // 更改的选择方法
        handleSelectionChange(val) {
            this.$emit('select', val);
        },
        // 点击更改页数的触发事件
        handleCurrentChange(val) {
            this.$emit('change', val);
        },
        // 按钮的点击事件
        handleEdit(scope, key) {
            this.$emit(key, scope);
        }
    },
    mounted() {

    },
    watch: {

    }
}

</script>
<style lang="less">
</style>
